/* 基本样式 */
.mybox {
  margin: 0.5rem;
  border: 1px solid #ff0000;
}

/* 布局一 */
.flex1 {
  /* 
  display:flex;
  表示当前元素启用压力盒子效果（一般是用于布局效果）
  效果是强制将本元素里面的一级子元素压迫再一行上！！！！
  */
  display: flex;
}

/* 布局2 */
.flex2 {
  display: flex;
  /*
    justify-content是压力布局的水平对齐方式 
    space-between表示分散对齐
    多余的空间会平均分配
  */
  justify-content: space-between;
}

.flex3 {
  display: flex;
  /* space-around表示多余的空间会平均分配到每一个子元素两侧  */
  /* space-evenly表示空白完全的平均分配 */
  justify-content: space-around;
}

.flex4 {
  display: flex;
  /* 
    元素整体靠齐方式，center就是全部在中间
    flex-start是靠左（默认值）,flex-end是靠右
  */
  justify-content: flex-end;
}

/* 垂直对齐方式 */
.flex5 {
  display: flex;
  /* align-items是垂直方向的对齐方式
  center是居中,flex-start是靠上，flex-end是靠下 */
  align-items: center;

  justify-content: space-around;
}

/* 压力值 */
.flex6 {
  display: flex;
}
/*
  flex是压力值，父元素必须是压力布局
  压力值的大小决定了分配空间的大小
  只要有压力值，父元素的空间就没有空余，所以也就没有水平对齐方式
*/
.flex6 > div:first-child {
  flex: 2;
}
/* 
  > 选择器表里面第一级子元素
  例如 .a > div  表示class为a的元素里面的第一级的div
  由于压力布局也只影响一级，所有和>选择器很搭
*/
.flex6 > div:last-child {
  flex: 3;
}
/* 
  选择器:first-child表示匹配选择器的元素中的第一个
  :last-child表示最后一个
  :nth-child(n)表示第n个
*/
.flex6 > div:nth-child(2) {
  flex: 1;
}

.flex7 {
  display: flex;
}

.flex7 > div:nth-child(2) {
  flex: 1;
}
